<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性盒</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      ul {
          list-style: none;
          /*width: 800px;*/
          width: 400px;
          height: 500px;

          text-align: center;
          font-size: 20px;
          font-weight: bold;
          border: 10px solid red;

          /* 块弹性盒 */
          display: flex;
          /* 行内弹性盒 */
          /* display: inline-flex; */
          /* 主轴,侧轴方向 */
          /*flex-direction: row;*/
          /* nowrap 常配合伸缩系数一起使用 */
          /*flex-wrap: wrap;*/

          /*direction 和 wrap 合并样式, 不要求顺序*/
          flex-flow: row wrap;

          /*主轴上的对齐方式*/
          /* space-evenly 用的比较多， 将空白位置均分*/
          /*justify-content: space-evenly;*/
          /*justify-content: start;*/
          /* 侧轴上的对齐方式 start end center*/
          /* margin: 0 auto 水平居中, 定位水平垂直居中, 弹性盒水平垂直居中*/
          /* stretch 拉伸, 子元素没有高度时自动拉伸 */
          align-items: stretch;
          /* 侧轴内容空白空间分配 */
          /*align-content: space-around;*/
      }

      li {
          width: 100px;
          line-height: 100px;
          /* 伸缩系数 */
          /* flex-shrink: 0;*/
      }

      li:nth-child(1) {
          background-color: #bfa;
      }

      li:nth-child(2) {
          background-color: tomato;
      }

      li:nth-child(3) {
          background-color: skyblue;
      }

      li:nth-child(4) {
          background-color: greenyellow;
      }

      li:nth-child(5) {
          background-color: orchid;
      }
      
      .box1 {
        width: 300px;
        height: 300px;
        background-color: orange;
        /* 块元素垂直水平居中 */
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .box2 {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
  </style>
</head>
<body>
<!--
    弹性盒概念:     比较新的布局方式, 很重要, 很常用
        弹性容器:
            块弹性容器, 行内弹性容器
        弹性子元素:
            注意: 只有弹性容器的子元素才是弹性子元素(可以设置伸缩系数), 后代元素不是
        主轴, 侧轴:  主轴侧轴是相对来说的, 默认row是主轴
        伸缩系数: shrink
 -->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<div class="box1">
  <div class="box2"></div>
</div>
</body>
</html>